Add AI-Powered CV Builder to Portfolio Projects Section

Overview

Integrate the newly deployed AI-powered CV/Resume Builder into the adamu.tech portfolio website by adding a project card in the projects section that links to the deployed application.

Requirements

1. Add Project Card to Projects Section

Add a new project card in the index.html file within the #projects section (around line 227-485) that showcases the CV Builder application.

Location: Insert after the existing project cards, before the closing </div> of .projects-grid

2. Project Card Content

The card should include:

Title: AI-Powered CV Builder

Description:

Professional resume builder with AI assistance, ATS optimization, and real-time preview. 
Features intelligent keyword matching, job description analysis, and automated content 
enhancement powered by GPT-4. Create, edit, and optimize multiple resumes with instant 
ATS scoring and actionable feedback.

Tags:

• AI/ML
• Next.js
• Resume Builder
• ATS Optimization
• TypeScript

Icon: Use a resume/document icon (existing SVG pattern from other cards)

Link: Point to the deployed Vercel application URL (to be provided)

• Primary URL: Will be https://cv-adab-tech.vercel.app or similar
• Make this a variable that can be easily updated

3. Design Requirements

Match Existing Style:

• Follow the exact same HTML structure as existing project cards (e.g., Khad App, Temitope Hospital)
• Use the same CSS classes: .project-card, .project-icon, .project-content, .project-title, .project-description, .project-tags, .project-footer
• Include the same animation attribute: data-animate="fade-up"
• Add appropriate data-delay for stagger effect (use next increment in sequence)

Icon SVG:
Use a document/resume themed icon. Suggested SVG:

<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
  <polyline points="14 2 14 8 20 8"/>
  <line x1="16" y1="13" x2="8" y2="13"/>
  <line x1="16" y1="17" x2="8" y2="17"/>
  <line x1="10" y1="9" x2="8" y2="9"/>
</svg>

4. Placement

Insert the CV Builder project card as the first or second project in the grid to give it prominence, or place it after Khad App (which is currently first).

Recommended position: Second project (after Khad App, before Temitope Hospital)

5. Responsive Design

Ensure the card:

• Works with the existing responsive grid layout
• Maintains consistent spacing with other cards
• Hover effects work properly (transform, shadow)
• Is accessible on mobile, tablet, and desktop

6. Link Configuration

The project card should include a link with:

<a href="[VERCEL_URL]" class="project-link" target="_blank" rel="noopener noreferrer">
  <span>Launch App</span>
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</a>

Note: Use target="_blank" since this links to an external Vercel application, unlike internal project demos.

Implementation Details

Exact Code Location

File: index.html
Section: Projects Section (#projects)
Line Range: ~227-485
Insert Position: After line ~265 (after Khad App card), or as first card

Code Structure Template

<article class="project-card" data-animate="fade-up" data-delay="[APPROPRIATE_DELAY]">
  <div class="project-icon">
    <!-- Document/Resume SVG icon -->
  </div>
  <div class="project-content">
    <h3 class="project-title">AI-Powered CV Builder</h3>
    <p class="project-description">
      Professional resume builder with AI assistance, ATS optimization, and real-time preview. 
      Features intelligent keyword matching, job description analysis, and automated content 
      enhancement powered by GPT-4.
    </p>
    <div class="project-tags">
      <span class="tag">AI/ML</span>
      <span class="tag">Next.js</span>
      <span class="tag">Resume</span>
      <span class="tag">ATS</span>
      <span class="tag">TypeScript</span>
    </div>
  </div>
  <div class="project-footer">
    <a href="https://cv-adab-tech.vercel.app" class="project-link" target="_blank" rel="noopener noreferrer">
      <span>Launch App</span>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M5 12h14M12 5l7 7-7 7"/>
      </svg>
    </a>
  </div>
</article>

Design Consistency Checklist

• ✅ Uses existing .project-card structure
• ✅ Includes animation attributes (data-animate, data-delay)
• ✅ Follows same icon → content → footer layout
• ✅ Uses semantic <article> tag
• ✅ Includes proper link attributes (target, rel)
• ✅ Tags are concise and relevant
• ✅ Description is 2-3 sentences, ~150-200 characters
• ✅ Icon matches the 40x40 size and stroke-width="2" pattern
• ✅ External link...